<template>
  <view class="client-review-container">
    <!-- 页面头部 -->
    <view class="page-header">
      <view class="header-content">
        <text class="page-title">客户评价</text>
        <text class="page-subtitle">{{ workOrderId }}</text>
      </view>
    </view>

    <!-- Review Guide -->
    <view class="review-guide-card">
      <view class="guide-header">
        <text class="guide-title">💡 评价指引</text>
      </view>
      <view class="guide-content">
        <text class="guide-text">您的评价对我们改进服务质量非常重要，请根据实际体验进行评价。</text>
      </view>
    </view>

    <!-- 星级评分 -->
    <view class="rating-card">
      <view class="card-header">
        <text class="card-title">⭐ 服务评分</text>
        <text class="rating-required">*</text>
      </view>

      <view class="rating-section">
        <view class="stars-container">
          <text
            v-for="star in 5"
            :key="star"
            class="star"
            :class="{ filled: star <= rating }"
            @click="setRating(star)"
          >⭐</text>
        </view>
        <text class="rating-text">{{ getRatingText(rating) }}</text>
      </view>

      <view v-if="ratingError" class="error-message">
        {{ ratingError }}
      </view>
    </view>

    <!-- 评价内容 -->
    <view class="comment-card">
      <view class="card-header">
        <text class="card-title">📝 评价内容</text>
        <text class="char-count" :class="{ error: comment.length < 10 }">{{ comment.length }}/10</text>
      </view>

      <textarea
        v-model="comment"
        placeholder="请详细描述您的评价和建议，至少10个字符..."
        class="comment-input"
        maxlength="500"
        @input="onCommentChange"
      ></textarea>

      <view v-if="showCommentError" class="error-tip">
        <text>Need {{ 10 - comment.length }} more characters</text>
      </view>
      <view v-if="commentError" class="error-message">
        <text>{{ commentError }}</text>
      </view>
    </view>

    <!-- 照片上传 (可选) -->
    <view class="photos-card">
      <view class="card-header">
        <text class="card-title">📸 上传照片 (可选)</text>
        <text class="photo-count">{{ photos.length }}/5</text>
      </view>

      <view class="photos-grid">
        <!-- 已上传的照片 -->
        <view v-for="(photo, index) in photos" :key="index" class="photo-item">
          <image :src="photo" class="photo-preview" mode="aspectFill"></image>
          <view class="photo-remove" @click="removePhoto(index)">
            <text class="remove-icon">❌</text>
          </view>
        </view>

        <!-- 上传按钮 -->
        <view v-if="photos.length < 5" class="upload-btn" @click="choosePhoto">
          <view class="upload-icon">📷</view>
          <view class="upload-text">上传照片</view>
        </view>
      </view>

      <view class="photo-tip">
        💡 您可以上传相关照片作为评价的补充说明
      </view>
    </view>

    <!-- 提交按钮 -->
    <view class="submit-section">
      <button
        class="btn btn-submit"
        :disabled="!canSubmit || submitting"
        @click="submitReview"
      >
        <text v-if="submitting">提交中...</text>
        <text v-else-if="!canSubmit">请完成评价</text>
        <text v-else>提交评价</text>
      </button>

      <button class="btn btn-cancel" @click="cancelReview">
        取消评价
      </button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useWorkOrderProcessStore } from '@/stores/work-order-process'

// 页面参数
const workOrderId = ref('')

// 评价存储
const workOrderProcessStore = useWorkOrderProcessStore()

// 表单数据
const rating = ref(0)
const comment = ref('')
const photos = ref<string[]>([])
const submitting = ref(false)

// 错误信息
const ratingError = ref('')
const commentError = ref('')

// 页面加载
onLoad((options) => {
  if (options?.id) {
    workOrderId.value = options.id
  }
})

// 计算属性
const canSubmit = computed(() => {
  return rating.value > 0 && comment.value.length >= 10
})

const showCommentError = computed(() => {
  return comment.value.length > 0 && comment.value.length < 10
})

// 获取评分文字
const getRatingText = (rating: number): string => {
  const texts = ['', '非常不满意', '不满意', '一般', '满意', '非常满意']
  return texts[rating] || '请选择评分'
}

// 设置评分
const setRating = (star: number) => {
  rating.value = star
  ratingError.value = ''
}

// 评论变化处理
const onCommentChange = () => {
  commentError.value = ''
}

// 选择照片
const choosePhoto = () => {
  uni.chooseImage({
    count: Math.min(5 - photos.value.length, 9),
    sizeType: ['compressed'],
    sourceType: ['camera', 'album'],
    success: (res) => {
      res.tempFilePaths.forEach((path) => {
        if (photos.value.length < 5) {
          photos.value.push(path)
        }
      })
    },
    fail: (err) => {
      uni.showToast({
        title: '选择照片失败',
        icon: 'none'
      })
    }
  })
}

// 删除照片
const removePhoto = (index: number) => {
  uni.showModal({
    title: '确认删除',
    content: '确定要删除这张照片吗？',
    success: (res) => {
      if (res.confirm) {
        photos.value.splice(index, 1)
      }
    }
  })
}

// 验证表单
const validateForm = (): boolean => {
  let isValid = true

  if (rating.value === 0) {
    ratingError.value = '请选择评分'
    isValid = false
  }

  if (comment.value.length < 10) {
    commentError.value = '评价内容至少需要10个字符'
    isValid = false
  }

  return isValid
}

// 提交评价
const submitReview = async () => {
  if (!validateForm()) {
    return
  }

  submitting.value = true

  try {
    // 构建评价数据
    const reviewData = {
      workOrderId: workOrderId.value,
      clientId: 'client_' + Date.now(), // 模拟客户ID
      clientName: '客户' + Math.floor(Math.random() * 100), // 模拟客户名称
      rating: rating.value,
      comment: comment.value,
      photos: photos.value.length > 0 ? photos.value : undefined
    }

    // 提交评价
    await workOrderProcessStore.submitClientReview(reviewData)

    uni.showToast({
      title: '评价提交成功',
      icon: 'success'
    })

    // 返回上一页
    setTimeout(() => {
      uni.navigateBack()
    }, 1500)

  } catch (error: any) {
    uni.showToast({
      title: error.message || '评价提交失败',
      icon: 'none'
    })
  } finally {
    submitting.value = false
  }
}

// 取消评价
const cancelReview = () => {
  uni.showModal({
    title: '确认取消',
    content: '确定要取消评价吗？已填写的内容将不会保存。',
    success: (res) => {
      if (res.confirm) {
        uni.navigateBack()
      }
    }
  })
}
</script>

<style lang="scss" scoped>
.client-review-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f6ffed 0%, #e6f7ff 100%);
  padding: 24rpx;
  padding-bottom: 40rpx;
}

// 页面头部
.page-header {
  background: linear-gradient(135deg, #52c41a, #73d13d);
  padding: 32rpx;
  margin: -24rpx -24rpx 24rpx;
  color: #ffffff;

  .header-content {
    text-align: center;
  }

  .page-title {
    display: block;
    font-size: 36rpx;
    font-weight: bold;
    margin-bottom: 8rpx;
  }

  .page-subtitle {
    font-size: 24rpx;
    opacity: 0.9;
  }
}

// 通用卡片样式
.review-guide-card,
.rating-card,
.comment-card,
.photos-card {
  background: #ffffff;
  border-radius: 24rpx;
  padding: 32rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
  padding-bottom: 16rpx;
  border-bottom: 1rpx solid #f0f0f0;

  .card-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
  }

  .rating-required {
    color: #ff4d4f;
    font-size: 32rpx;
    font-weight: bold;
  }

  .char-count,
  .photo-count {
    font-size: 24rpx;
    color: #999;

    &.error {
      color: #ff4d4f;
      font-weight: bold;
    }
  }
}

// 评价指引卡片
.review-guide-card {
  .guide-header {
    margin-bottom: 16rpx;

    .guide-title {
      font-size: 28rpx;
      font-weight: bold;
      color: #333;
    }
  }

  .guide-content {
    .guide-text {
      font-size: 26rpx;
      color: #666;
      line-height: 1.6;
    }
  }
}

// 评分卡片
.rating-card {
  .rating-section {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 24rpx;

    .stars-container {
      display: flex;
      gap: 16rpx;

      .star {
        font-size: 56rpx;
        color: #e8e8e8;
        cursor: pointer;
        transition: all 0.3s ease;

        &.filled {
          color: #faad14;
          transform: scale(1.1);
        }

        &:active {
          transform: scale(0.9);
        }
      }
    }

    .rating-text {
      font-size: 28rpx;
      color: #666;
      font-weight: 500;
    }
  }

  .error-message {
    margin-top: 12rpx;
    font-size: 24rpx;
    color: #ff4d4f;
    font-weight: 500;
  }
}

// 评价内容卡片
.comment-card {
  .comment-input {
    width: 100%;
    min-height: 200rpx;
    padding: 24rpx;
    border: 2rpx solid #e8e8e8;
    border-radius: 16rpx;
    font-size: 28rpx;
    line-height: 1.6;

    &:focus {
      border-color: #52c41a;
      box-shadow: 0 0 0 4rpx rgba(82, 196, 26, 0.1);
    }
  }

  .error-tip {
    margin-top: 12rpx;
    font-size: 24rpx;
    color: #ff4d4f;
    font-weight: 500;
  }

  .error-message {
    margin-top: 12rpx;
    font-size: 24rpx;
    color: #ff4d4f;
    font-weight: 500;
  }
}

// 照片卡片
.photos-card {
  .photos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16rpx;

    .photo-item {
      position: relative;
      aspect-ratio: 1;
      border-radius: 16rpx;
      overflow: hidden;
      background: #f8f8f8;

      .photo-preview {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .photo-remove {
        position: absolute;
        top: 8rpx;
        right: 8rpx;
        width: 40rpx;
        height: 40rpx;
        background: rgba(255, 77, 79, 0.9);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;

        .remove-icon {
          font-size: 24rpx;
          color: #ffffff;
        }
      }
    }

    .upload-btn {
      aspect-ratio: 1;
      border: 2rpx dashed #e8e8e8;
      border-radius: 16rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: #fafafa;

      .upload-icon {
        font-size: 48rpx;
        color: #999;
        margin-bottom: 8rpx;
      }

      .upload-text {
        font-size: 24rpx;
        color: #999;
      }
    }
  }

  .photo-tip {
    margin-top: 16rpx;
    padding: 16rpx;
    background: #e6f7ff;
    border-radius: 12rpx;
    font-size: 24rpx;
    color: #1890ff;
  }
}

// 提交区域
.submit-section {
  margin-top: 48rpx;
  display: flex;
  gap: 24rpx;

  .btn {
    flex: 1;
    height: 88rpx;
    border-radius: 16rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32rpx;
    font-weight: 500;
    transition: all 0.3s ease;

    &:active {
      transform: scale(0.98);
    }

    &:disabled {
      opacity: 0.6;
    }

    &.btn-submit {
      background: linear-gradient(135deg, #52c41a, #73d13d);
      color: #ffffff;
      box-shadow: 0 4rpx 12rpx rgba(82, 196, 26, 0.3);

      &:disabled {
        background: #ccc;
        box-shadow: none;
      }
    }

    &.btn-cancel {
      background: #ffffff;
      color: #666;
      border: 2rpx solid #e8e8e8;
    }
  }
}
</style>